<template>
  <div class="view-people">
    <el-form :model="peopleForm" label-width="100px" v-if="isShow">
      <el-form-item :label="`${item.label}：`" v-for="(item, index) in listKey" :key="index">
        <div v-if="item.name !== 'roleCode'">{{peopleForm[item.name]}}</div>
        <div v-if="item.name === 'roleCode'">{{getRoleName(peopleForm[item.name])}}</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import Config from '../../../../config'
  export default {
    name: 'ViewPeople',
    props: {
      peopleForm: {
        type: Object,
        default: function () {
          return {
          }
        }
      }
    },
    data () {
      return {
        isShow: false,
        roleEnum: [],
        listKey: [
          {
            name: 'loginName',
            label: '用户名'
          },
          {
            name: 'name',
            label: '姓名'
          },
          {
            name: 'phone',
            label: '电话号码'
          },
          {
            name: 'roleCode',
            label: '角色权限'
          },
          {
            name: 'districtName',
            label: '管辖区域'
          },
          {
            name: 'createTime',
            label: '注册时间'
          }
        ]
      }
    },
    mounted () {
      this.getAllRoleType()
    },
    methods: {
      /**
       * 获取所有的角色列表
       * */
      getAllRoleType () {
        const url = `${Config.AUTH_URL}/role/getAll`
        this.$http.get(url)
          .then(data => {
            this.roleEnum.splice(0)
            data.forEach(item => {
              this.roleEnum.push(item)
            })
            console.log(this.roleEnum)
            this.isShow = true
          })
      },
      getRoleName (id) {
        let name = ''
        this.roleEnum.some(item => {
          if (id === item.id) {
            name = item.name
            return true
          }
        })
        return name
      }
    }
  }
</script>

<style lang="scss" scoped>
  .view-people {
  }
</style>
